<template>
  <div class="wrap">
    <div>
      <div class="wrap_top">
        <van-nav-bar title="我的作业" placeholder fixed left-arrow />
        <!--常规导师-->
        <div class="cg-daoshi">
          <div class="item">
            <div class="item_right">
              <div class="name">作业结果</div>
              <div class="type">合格</div>
            </div>
          </div>
          <div class="by">
            <normal-guage-chart
              value="20"
              barMaxWidth="25"
              label="作业评分"
              labelColor="#676B6B"
              valueColor="#00C37D"
              width="100%"
              height="100%"
            ></normal-guage-chart>
          </div>
          <div class="myPic">
            <div class="getP">
              获得学分 <span>23</span>
              <div class="area">
                <div class="area-title">评价与建议</div>
                <div class="area-desc">
                  评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zy-detail">
          <div class="title-sy">作业详情</div>
          <div class="desc">
            <div class="list-desc">
              作业描述作业描述作业描述作业描述作业描 述作业描述作业描述作业描述
            </div>
            <div class="list-t">
              <div class="list" v-for="i in 1" :key="i">
                <div class="list-img">
                  <img src="@img/zip1.png" alt="" />
                </div>
                <div class="list-info">
                  <div class="list-title">作业文件.zip</div>
                  <div class="list-size">172.KB</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zy-detail">
          <div class="title-sy">其他要求</div>
          <div class="desc">
            <div class="list-t">
              <div class="list-tit">
                <van-row>
                  <van-col :span="8">
                    <div class="title">作业要求</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">作业要求描述作业要求描述</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col :span="8">
                    <div class="title">最晚提交时间</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">2023-03-22</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col :span="8">
                    <div class="title">批阅时间</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">2023-03-23 12:22:33</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col :span="8">
                    <div class="title">批阅人</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">陈晓米 上官桃花</div></van-col
                  >
                </van-row>
              </div>
            </div>
          </div>
        </div>

        <div class="zy-detail">
          <div class="title-sy">其他信息</div>
          <div class="desc">
            <div class="list-t">
              <div class="list-tit">
                <van-row>
                  <van-col :span="8">
                    <div class="title">是否精品</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value"><van-switch v-model="checked" active-color="#00D0AB" inactive-color="#dcdee0" size="18px"/></div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col :span="8">
                    <div class="title">批阅时间</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">2023-03-23 12:22:33</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col :span="8">
                    <div class="title">批阅人</div>
                  </van-col>
                  <van-col :span="16">
                    <div class="value">陈晓米 上官桃花</div></van-col
                  >
                </van-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NormalGuageChart from "@/components/semicircleSchedule.vue";
export default {
  components: { NormalGuageChart },
  data() {
    return {
        checked: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  height: calc(100vh + 344px);
  background: #f4f8ff;
  ::v-deep(.van-hairline--bottom:after) {
    border: none;
  }
  &_top {
    height: 344px;
    background: linear-gradient(180deg, #cbfff6 0%, #f4f8ff 100%);
    padding: 0 16px;
    .cg-daoshi {
      margin-top: 30px;
      background: #fff;
      border-radius: 8px;
      position: relative;
      .item {
        display: flex;
        align-items: center;
        padding: 28px 20px;
        img {
          width: 50px;
          border-radius: 50%;
          margin-right: 11px;
        }
        .name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #676b6b;
          line-height: 24px;
          text-align: left;
          font-style: normal;
        }
        .type {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 30px;
          color: #272b2d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          border-bottom: 6px solid #00c37d;
          margin-top: 12px;
        }
      }
      .by {
        position: absolute;
        top: -39px;
        right: 10px;
        width: 140px;
        height: 120px;
        background: #fff;
        border-radius: 50%;
      }
      .myPic {
        .getP {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #272b2d;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          padding: 17px 16px 10px 16px;
          span {
            color: #ffa940;
          }
        }
        .area {
          margin-top: 10px;
          background: #f5f9fc;
          border-radius: 8px;
          padding: 5px 14px;
          .area-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #676b6b;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            padding-bottom: 4px;
          }
          .area-desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #272b2d;
            line-height: 24px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .zy-detail {
      .title-sy {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #171a1d;
        line-height: 25px;
        text-align: left;
        font-style: normal;
        padding: 22px 0 9px 0;
      }
      .desc {
        background: #ffffff;
        border-radius: 8px;
        padding: 11px 16px;
        .list-desc {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #272b2d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .list-t {
          .list-tit {
            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #676b6b;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              padding-bottom: 10px;
            }
            .value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #272b2d;
              line-height: 24px;
              text-align: right;
              font-style: normal;
              padding-bottom: 10px;
            }
          }
          .list {
            display: flex;
            padding: 13px 0;
            .list-img {
              width: 46px;
              height: 46px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .list-info {
              flex: 1;
              padding-left: 10px;
              .list-title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #171a1d;
                line-height: 22px;
                text-align: left;
                font-style: normal;
                padding-bottom: 4px;
              }
              .list-size {
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 400;
                font-size: 14px;
                color: rgba(23, 26, 29, 0.4);
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
